<template>
	<!-- 详情模块 -->
	<div class="page">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">用户管理</span>　|　<span>用户详情</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width:99.5%;margin-top:0.3rem;" border> -->
		<div class="bottom_top" @click="changeBox">
			<div class="abcset" id="info" :class="box=='info'?'cardActive':''">基本信息</div>
			<!-- <div class="service" id="service"  :class="box=='service'?'cardActive':''">扩展功能</div> -->
			<!-- <div class="weixin" id="weixin" :class="box=='weixin'?'cardActive':''">微信</div> -->
			<div class="power" id="power" :class="box=='power'?'cardActive':''">权限</div>
		</div>
	    <div v-if="box=='info'">
			<el-form :model="userInfo" block id="addform">
				<!-- <el-form-item label="项　　目名称:" :label-width="formLabelWidth">
		        <el-input v-model="userInfo.project_name" auto-complete="off" class="inpu" readonly></el-input>
		      </el-form-item> -->
				<el-form-item label="用户名称:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.user_name" auto-complete="off" class="inpu" readonly></el-input>
				</el-form-item>
				<el-form-item label="父级账号:" :label-width="formLabelWidth" v-if="userInfo.grade!=1" class="formline">
					<el-input v-model="userInfo.parent" auto-complete="off" class="inpu" readonly></el-input>
				</el-form-item>
				<el-form-item label="手机号:" :label-width="formLabelWidth" class="formline">
					<el-input v-model="userInfo.mobile" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="邮箱:" :label-width="formLabelWidth" class="formline">
					<el-input v-model="userInfo.email" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="职位:" :label-width="formLabelWidth" class="formline">
					<el-input v-model="userInfo.position" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="平台名称:" :label-width="formLabelWidth" v-if="userInfo.grade<3" class="formline">
					<el-input v-model="userInfo.site_name" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="注册时间:" :label-width="formLabelWidth" class="formline">
					<el-input v-model="userInfo.reg_time" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="最后登录时间:" :label-width="formLabelWidth" class="formline">
					<el-input v-model="userInfo.last_login_time" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="最后登录的IP:" :label-width="formLabelWidth" class="formline">
					<el-input v-model="userInfo.last_login_ip" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<!-- <el-form-item label="最后登录地址:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.lastLoginAddress" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item> -->
			</el-form>
		</div>
		<div v-if="box=='service'">
			<el-form :model="userInfo" block id="addform"  :disabled="true">
				<el-form-item label="财务管理:" :label-width="formLabelWidth" v-if="userInfo.grade<3">
					<el-switch v-model="userInfo.allow_finance" :width="stateWidth" class="demo turn"
						style="margin-left:-0.8rem;" active-color="#13ce66" inactive-color="#ccc" active-text="开"
						inactive-text="关" :active-value="one" :inactive-value="zero">
					</el-switch>
				</el-form-item>
				<el-form-item label="是否开发者:" :label-width="formLabelWidth" class="formline">
					<el-switch v-model="userInfo.is_developer" :width="stateWidth" class="demo turn"
						style="margin-left:-0.8rem;" active-color="#13ce66" inactive-color="#ccc" active-text="是"
						inactive-text="否" :active-value="one" :inactive-value="zero">
					</el-switch>
				</el-form-item>
				<el-form-item v-if="userInfo.is_developer==1" label="AppID:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="userInfo.app_id" auto-complete="off" class="inpu" style="width:8rem;" id="appid"  type="password"></el-input>
					<i class="el-icon-view flr" @click="showId"></i>
				</el-form-item>
				<el-form-item v-if="userInfo.is_developer==1" label="AppSecret:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="userInfo.app_secret" auto-complete="off" class="inpu" style="width:8rem;" id="secret" type="password"></el-input>
					<i class="el-icon-view flr" @click="showSecret"></i>
				</el-form-item>
				<el-form-item v-if="userInfo.is_developer==1" label="IP白名单:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="userInfo.whitelist" auto-complete="off" class="inpu" style="width:8rem;" type="textarea" :rows="2" placeholder="白名单IP地址,多个用','(英文逗号)隔开"></el-input>
				</el-form-item>
				<!-- <el-form-item v-if="userInfo.is_developer==1" label="IP白名单:" :label-width="formLabelWidth" class="formline">
					<p>{{userInfo.whitelist}}</p>
				</el-form-item>	 -->
			</el-form>	
				
		</div>	
			 
		<!-- <div v-if="box=='weixin'">
			<div class="not" v-if="userInfo.open_id==''">未绑定微信账号</div>
			<el-form :model="userInfo" block id="addform" v-else>
				<el-form-item label="openId:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.open_id" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="昵称:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.nickname" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="性别:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.sex" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="省份:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.province" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="城市:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.city" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
				<el-form-item label="绑定时间:" :label-width="formLabelWidth">
					<el-input v-model="userInfo.bind_time" auto-complete="off" class="inpu" readonly></el-input><br>
				</el-form-item>
			</el-form>
		</div> -->
		<div v-if="box=='power'">
			<el-form :model="userInfo" block id="addform">
				<el-form-item label="平台命名:" :label-width="formLabelWidth" v-if="userInfo.grade<3">
					<el-switch v-model="userInfo.site_auth" :width="stateWidth" class="demo turn"
						style="margin-left:-0.8rem;" active-color="#13ce66" inactive-color="#ccc" active-text="开"
						inactive-text="关" :active-value="one" :inactive-value="zero" disabled>
					</el-switch>
				</el-form-item>
				<el-form-item label="能否创建账号:" :label-width="formLabelWidth" class="formline">
					<el-switch v-model="userInfo.enable_create" :width="stateWidth" class="demo turn"
						style="margin-left:-0.8rem;" active-color="#13ce66" inactive-color="#ccc" active-text="能"
						inactive-text="否" :active-value="one" :inactive-value="zero" disabled>
					</el-switch>
				</el-form-item>
				<!-- <el-form-item label="是否接受报警:" :label-width="formLabelWidth" class="formline">
					<el-switch v-model="userInfo.enable_receive" :width="stateWidth" class="demo turn"
						style="margin-left:-0.8rem;" active-color="#13ce66" inactive-color="#ccc" active-text="是"
						inactive-text="否" :active-value="one" :inactive-value="zero" disabled>
					</el-switch>
				</el-form-item> -->
				<el-form-item label="设备权限:" :label-width="formLabelWidth" class="formline">
					<el-switch v-model="userInfo.equip_auth" :width="stateWidth" class="demo turn"
						style="margin-left:-0.8rem;" active-color="#13ce66" inactive-color="#ccc" active-text="读写"
						inactive-text="只读" :active-value="one" :inactive-value="zero" disabled>
					</el-switch>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
    export default {
        name: 'userInfo',
        data() {
            return {
                one: 1,
                zero: 0,
                formLabelWidth2: '80px',
                formLabelWidth: '140px',
                stateWidth: 60,
                box: 'info',
                baseurl: this.$baseurl,
                id: 0,
                userInfo: {}

            }
        },
        created() {
            var that = this;
            this.id = localStorage.getItem("userInfoId");
            this.$http({
                method: 'post',
                url: 'api/user/info',
                data: {
                    "id": that.id

                }
            }).then(res => {
                if (res && res.data.result == "success") {
                    this.userInfo = res.data.data;
                }
            }).catch(error => {
                console.log(error);

            });
        },
        methods: {
			showId(event) {
				if (document.getElementById("appid").type == "password") {
					document.getElementById("appid").type = "text";
					event.target.style.color = "deepskyblue";
				} else {
					document.getElementById("appid").type = "password";
					event.target.style.color = "#ccc";
				}
			
			},
			showSecret(event) {
				if (document.getElementById("secret").type == "password") {
					document.getElementById("secret").type = "text";
					event.target.style.color = "deepskyblue";
				} else {
					document.getElementById("secret").type = "password";
					event.target.style.color = "#ccc";
				}
			},
            changeBox(event) {
                if (event.target.id == "info" || event.target.id == "service" || event.target.id == "power") {
                    this.box = event.target.id;
                } else {
                    this.box = "info";
                }
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    @media all and (max-width:1600px) {
        .turn {
            transform: translateY(0.4rem) !important;
        }
    }
    
    .abcset,
    .service,
    .power {
        float: left;
        width: 2.2rem;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.35rem;
		cursor: pointer;
        /* background-color: #B7873C; */
    }
    
    .weixin,
    .power {
        width: 1.6rem;
    }
    
    #addform {
        /* width:18%; */
        text-align: left;
        margin-top: 0.3rem;
    }
    
    .formline {
        margin-top: -0.2rem;
    }
    
    .inpu {
        width: 5rem;
    }
	
	.flr {
		font-size: 0.4rem;
		vertical-align: middle;
		margin-left:0.1rem;
		color:#ccc;
	}
    /* .not {
        color: #111111;
        font-size: 0.267rem;
        text-align: left;
        height: 1rem;
        line-height: 1rem;
    } */
</style>